<template>
	<view>
		<wu-calendar fold :date="endDate" :color="appTheme.mainBg" :insert="true"
			@change="calendarChange"></wu-calendar>
		<div class="box">
			<div class="date">{{endDate}}</div>
			<div class="list" v-if="list.length">
				<div class="item" v-for="(item,index) in list" @click.stop="goDetail(item)" :key="index">
					<div class="left">
						<image :src="item.goods?.goods_image" mode=""></image>
					</div>
					<div class="right">
						<view class="u-line-2 top">
							{{item.goods?.goods_name||''}}
						</view>
						<div class="bottom">
							<div class="price">
								<div class="real">
									￥<text>{{item.goods?.goods_price_min}}</text>
								</div>
								<div class="fl" v-if="false">
									约返{{item.fx}}元
								</div>
							</div>
							<div class="del" @click.stop="delFoot(item.id)">
								<u-icon name="trash"></u-icon>
							</div>
						</div>

					</div>
				</div>
			</div>
			<div class="empty" v-else>
				<image :src="imgs.empty" mode=""></image>
				<text>暂无浏览记录</text>
				<div class="go" @click="goTo">
					去逛逛
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import imgs from '@/utils/imgs.js'
	export default {
		data() {
			return {
				imgs,
				endDate: '',
				list: []
			};
		},
		components: {},
		methods: {
			goDetail(item) {
				uni.navigateTo({
					url: '/pages/goods/detail?goodsId=' + item.goods.goods_id
				})
			},
			goTo() {
				uni.switchTab({
					url: '/pages/supe-sale/supe-sale'
				})
			},
			calendarChange(e) {
				this.endDate = e.fulldate
				this.getList()
			},
			async getList() {
				const date = this.endDate.split('-').join('')
				const res = await this.$api.my.footList({
					date
				})
				this.list = res.data.list
			},
			getCurrentDate() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0');
				const day = String(now.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			delFoot(id) {
				uni.showModal({
					title: '温馨提示',
					content: '您确定删除该浏览记录吗?',
					success: async ({
						confirm
					}) => {
						if (confirm) {
							const res = await this.$api.my.delFoot({
								id
							})
							if (res.status) {
								this.$toast('删除成功')
								this.getList()
							}
						}
					}
				})
			}
		},
		onLoad() {
			this.endDate = this.getCurrentDate()
			this.getList()
		}
	}
</script>

<style lang="scss">
	.empty {
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		>image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 24rpx;
		}

		>text {
			font-weight: 500;
			font-size: 28rpx;
			color: #999093;
			margin-bottom: 80rpx;
		}

		.go {
			width: 322rpx;
			height: 88rpx;
			background: #FF8C19;
			border-radius: 45rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}

	.box {
		margin-top: 20rpx;
		padding: 32rpx 24rpx;
		border-radius: 24rpx;
		background-color: #fff;

		.date {
			font-weight: bold;
			font-size: 24rpx;
			color: #333;
			margin-bottom: 28rpx;
		}

		.list {
			.item {
				display: flex;
				align-items: center;
				margin-bottom: 12rpx;

				.left {
					width: 192rpx;
					height: 192rpx;
					border-radius: 16rpx;
					overflow: hidden;
					margin-right: 24rpx;

					>image {
						width: 100%;
						height: 100%;
					}
				}

				.right {
					flex: 1;

					.top {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						margin-bottom: 40rpx;
					}

					.bottom {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.price {
							display: flex;
							align-items: center;

							.real {
								color: #FF8C19;
								margin-right: 12rpx;

								>text {
									font-size: 36rpx;
								}
							}

							.fl {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 126rpx;
								height: 28rpx;
								border-radius: 4rpx;
								border: 1rpx solid #FF8C19;
								font-weight: 500;
								font-size: 20rpx;
								color: #FF8C19;
							}
						}
					}
				}
			}
		}
	}
</style>